<template>
    <jb-crud-page ref="managePageRef" :edit-component="Edit" edit-modal-width="1200" :search-url="`/api/admin/wechatAutoReply/content/datas/${props.id}`" :pager="false" :search-btn-shown="false">
        <template #title>
            <div class="flex items-center">
                <span>回复内容管理</span>
            </div>
        </template>
        <template #opt>
            <jb-btn class="mr-8px" type="primary" ghost @click="managePageRef?.showEditModal('新增',{mpId:props.mpId,autoReplyId:props.id,id:''})" :icon="Icons.ADD">新增</jb-btn>
            <jb-btn>初始化排序</jb-btn>
        </template>
        <template #default="{ state,list }">
            <vxe-table
                height="auto"
                show-overflow="tooltip"
                :seq-config="{ startIndex: state.tableStartIndex }"
                :column-config="{ resizable: true }"
                border
                show-header-overflow
                :row-config="{ isHover: true }"
                align="center"
                :data="list"
            >
                >
                <jb-column type="seq" title="序号" width="60"></jb-column>

                <jb-column field="type" title="类型">
                    <template #default="{ row }">
                        <n-tag type="primary" v-if="row.type==='text'">文本</n-tag>
                        <n-tag type="default" v-if="row.type==='news'">图文</n-tag>
                        <n-tag type="warning" v-if="row.type==='video'">视频</n-tag>
                        <n-tag type="info" v-if="row.type==='image'">图片</n-tag>
                        <n-tag type="success" v-if="row.type==='voice'">语音</n-tag>
                    </template>
                </jb-column>
                <jb-column field="content" title="内容">
                </jb-column>
                <jb-column field="enable" title="是否启用">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.enable"
                            :url="`/api/admin/wechatAutoReply/content/toggleEnable/${row.autoReplyId}-${row.id}`"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column field="createTime" title="创建时间"></jb-column>
                    <jb-column title="操作" fixed="right" width="100">
                        <template #default="{ row }">
                            <jb-btn
                                tip-text="编辑"
                                icon="uil:edit-alt"
                                secondary
                                type="warning"
                                quaternary
                                circle
                                strong
                                @click="
                                managePageRef?.showEditModal('编辑', {
                                    id: row.id,
                                    mpId:props.mpId,
                                    autoReplyId:props.id
                                })
                            "
                            ></jb-btn>
                            <jb-btn
                                tip-text="删除"
                                icon="ant-design:delete-filled"
                                secondary
                                type="error"
                                quaternary
                                circle
                                strong
                                class="mx-8px"
                                confirm-text="确定删除这条数据？"
                                :url="`/api/admin/wechatAutoReply/content/delete/${row.autoReplyId}-${row.id}`"
                                @success="managePageRef?.loadData()"
                            ></jb-btn>
                        </template>
                    </jb-column>
            </vxe-table>
        </template>

    </jb-crud-page>
</template>

<script setup lang="ts">
import JbBtn from "@/components/_builtin/jb-btn/index.vue";
import {ref} from "vue";
import JbCrudPage from "@/components/_builtin/jb-crud-page/index.vue";
import {useResetableData} from "@/hooks/common/use-resetable-data";
import Edit from './components/edit.vue'
import {Icons} from "@/constants";

const props = withDefaults(
    defineProps<{
        mpId:string,
        id: string
    }>(),
    {
        mpId:'',
        id:''
    }
)

const managePageRef = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    type: '',
    subjectType: '',
    isAuthenticated: '',
    enable: ''
})



</script>

<style scoped>

</style>